import {BaseProps} from "../../../App";
import React from "react";
import {ProjectModel, ProjectType} from "../../model/ProjectModel";
import {TextField} from "@material-ui/core";
import "./ProjectCreate.css";
import Button from "@material-ui/core/Button";
import {ProjectApi} from "../../../framework/api/ProjectApi";

interface ProjectCreateProps extends BaseProps {

}

interface ProjectCreateState {
    project: ProjectModel;
}

export class ProjectCreate extends React.Component<ProjectCreateProps, ProjectCreateState> {

    constructor(props: ProjectCreateProps) {
        super(props);
        this.inputChange = this.inputChange.bind(this);
        this.create = this.create.bind(this);
        this.state = {
            project: {
                id: "",
                name: "",
                description: "",
                type: ProjectType.COMMON
            }
        }
    }

    inputChange(e: any) {
        let project: any = {...this.state.project};
        project[e.target.name] = e.target.value;
        this.setState({
            project: project
        })
    }

    create() {
        ProjectApi.create(this.state.project).then(project => {
            this.props.history.push("/" + project.id + "/home");
        })
    }

    render(): React.ReactElement | string | number | {} | React.ReactNodeArray | React.ReactPortal | boolean | null | undefined {
        return <div className='project-create-content'>
            <TextField name='name' label='名称' value={this.state.project.name} onChange={this.inputChange}/>
            <TextField name='description' label='描述' value={this.state.project.description}
                       onChange={this.inputChange}/>
            <Button color='primary' variant='contained' onClick={this.create}>新建</Button>
        </div>
    }
}
